<template>
  <div class="remind" ref="target">
    <el-link type="primary" :underline="false" class="remind-btn" v-loading="loading"
      @click="visible = !visible">系统出图消息</el-link>
    <el-card shadow="always" v-show="visible" class="remind-card">
      <el-table :data="tableData" border class="normal-table" ref="remindTable" @selection-change="selectChange"
        @select="selectClick" @select-all="selectAll" max-height="300">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" type="index" :index="indexMethod" width="55" align="center"></el-table-column>
        <el-table-column label="地震消息" prop="" align="center">
          <template #default="{ row }">
            {{ row.province }}{{ row.city }}{{ row.county }}（{{ row.longitude }}，{{ row.latitude }}）{{ row.earthquakeDate
            }}发生{{ row.mm }}级地震
          </template>
        </el-table-column>
      </el-table>
      <p style="color: var(--el-color-danger); ">
        注：此处仅展示大于或等于地震阈值的地震消息，
        可前往【地震应急快速出图】-【数据管理】-【出图设置】进行修改
      </p>
      <el-row justify="end">
        <el-button type="primary" @click="confirmBtn">预览成果</el-button>
      </el-row>
    </el-card>
  </div>
  <!-- <ResultPreview v-model:open="resultPreviewOpen" :title="title" :type="type" :data="curItem" /> -->
  <ResultView v-model:open="resultViewOpen" :title="title" :attachId="attachId" :remind="true" />
</template>
<script setup>
// import ResultPreview from '@/views/quickMapping/common/manualMapping/resultPreview'
// import { onClickOutside } from '@vueuse/core'
import ResultView from '@/views/quickMapping/common/manualMapping/ResultView'
import { useNow, useDateFormat, onClickOutside } from '@vueuse/core'
import { getTemplate, saveMap } from '@/api/quickMapping/quickMapping/index'
import { templateType } from '@/views/quickMapping/common/const'
import { ElLoading } from 'element-plus'

const props = defineProps({
  title: String,
  type: String,
  data: {
    type: Array,
    default: () => ([])
  },
  loading: Boolean
})
const emits = defineEmits(['update:open'])
const { proxy } = getCurrentInstance()
const tableData = computed(() => props.data.filter(item => item?.cataId))

const visible = ref(true)
const dataList = ref([])
const remindTable = ref()
const indexMethod = index => index + 1
// const resultPreviewOpen = ref(false)
const resultViewOpen = ref(false)

const curItem = ref({})
const selectChange = val => {
  curItem.value = val[0]
}
const selectClick = val => {
  if (val.length > 1) {
    let deleteItem = val.shift()
    remindTable.value.toggleRowSelection(deleteItem, false)
  }
}
const selectAll = () => {
  remindTable.value.clearSelection()
}
// const confirmBtn = () => {
//   if (JSON.stringify(curItem.value) == '{}') {
//     proxy.$modal.msgWarning('请选择一条数据！')
//     return
//   }
//   resultPreviewOpen.value = true
// }

const attachId = ref('')
let cancelFunc = {}

const confirmBtn = async () => {
  if (JSON.stringify(curItem.value) == '{}') {
    proxy.$modal.msgWarning('请选择一条数据！')
    return
  }
  const loading = ElLoading.service({
    lock: true,
    text: '出图中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  if (typeof cancelFunc.c == 'function') {
    cancelFunc.c('取消制图')
  }
  let mapForm = {...curItem.value}
  let res = await getTemplate(props.type)
  mapForm.copyChoice = res.data[0].id
  const { location, mm, earthquakeDate, latitude, longitude, epiDepth } = curItem.value
  if (props.type == templateType[0].value) {
    mapForm.title = `${location}${mm}级地震震中附近活动断层分布图`
  } else {
    mapForm.title = `${earthquakeDate.split(' ')[0]}${location}${mm}级地震构造图`
    mapForm.description = `中国地震台网正式测定：${useDateFormat(useNow(), 'YYYY年MM月DD日hh时mm分').value}在${location}（北纬${latitude}度，东经${longitude}度）发生${mm}级地震，震源深度${epiDepth}千米。`
  }
  mapForm.drawingUnit = localStorage.getItem('orgName')
  mapForm.drawDate = useDateFormat(useNow(), 'YYYY-MM-DD').value

  saveMap({ ...mapForm, type: props.type, previewImg: '' }, cancelFunc).then(res => {
    if (res.code == 200) {
      attachId.value = res.data.attach.attachId
      resultViewOpen.value = true
    }
    loading.close()
  }).catch(err => {
    if (err.message == '取消制图') {
      cancelFunc.c = null
      loading.close()
    }
  })
}

const target = ref()
onClickOutside(target, (event) => {
  visible.value = false
})
proxy.$Bus.on('tab-change', () => {
  visible.value = true
})
</script>
<style lang="scss" scoped>
.remind {
  position: relative;
}

.remind-btn {
  position: absolute;
  right: 0;
  bottom: 150px;
  height: 200px;
  font-weight: bold;
  font-size: 16px;

  width: 50px;
  background: var(--el-color-primary);
  color: #fff;
  border-radius: 5px;

  &:hover {
    color: #fff;
    background-color: #57a3ec;
    outline: 0;
  }

  :deep(span) {
    writing-mode: tb;
    letter-spacing: 10px;
    padding-top: 10px;
  }
}

.remind-card {
  position: absolute;
  right: 60px;
  bottom: -50%;
  height: 420px;
  transform: translateY(-10px);
}
</style>